<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
<div id="app" class="parent">
    <child>
        <template scope="a">
            <span>hello from parent</span>
            <!--将子组件中的say输出到父组件中。是子组件向父组件传递数据-->
            <span>{{ a.say }}</span>
        </template>
    </child>
</div>

<script type="text/javascript">
    <!--反斜杠实现字符串换行-->
    Vue.component('child', {
        template: '\
                <div class="child">\
                    <slot say="hello from child"></slot>\
                </div>'
    });

    new Vue({
        el: "#app"
    })
</script>

</body>
</html>